@use '@angular/material' as mat;
@mixin example-viewer-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  formly-example-viewer {
    .docs-example-viewer-wrapper {
      border: 1px solid rgba(mat.m2-get-color-from-palette($foreground, secondary-text), 0.03);
      box-shadow:
        0 2px 2px rgba(0, 0, 0, 0.24),
        0 0 2px rgba(0, 0, 0, 0.12);
      margin: 4px;
    }

    .docs-example-viewer-title {
      color: mat.m2-get-color-from-palette($foreground, secondary-text);
      background: #f2f3f2;
    }

    .docs-example-source-copy {
      color: mat.m2-get-color-from-palette($foreground, hint-text);
      right: 8px;

      [dir='rtl'] & {
        right: auto;
        left: 8px;
      }
    }

    .docs-example-source {
      border-bottom: 1px solid mat.m2-get-color-from-palette($foreground, divider);
      overflow-x: scroll;
    }
  }
}
